<template>
  <view>
    <!--1.1 搜索框 开始-->
    <YgSearch></YgSearch>
    <!--1.1 搜索框 结束-->

    <!--2.1 轮播图  开始 -->
    <u-swiper height="340" :list="swiperList" name="image_src"></u-swiper>
    <!--2.1 轮播图  结束 -->

    <!--3.1 导航  开始-->
    <view class="u-flex">
      <navigator
        v-for="item in catitems"
        :key="item.name"
        class="u-flex-1 u-padding-30"
      >
        <u-image mode="widthFix" :src="item.image_src" width="100%"></u-image>
      </navigator>
    </view>
    <!--3.1 导航  结束-->

    <!-- 4.1 楼层 开始 -->
    <view class="floor">
      <view class="floor-group" v-for="(item1, index1) in floors" :key="index1">
        <view class="group-title">
          <u-image
            mode="widthFix"
            :src="item1.floor_title.image_src"
            width="100%"
          ></u-image>
        </view>
        <view class="group-content">
          <navigator
            v-for="(item2, index2) in item1.product_list"
            :key="item2.name"
          >
            <!-- 当image标签使用了 widthFix属性之后   高度无效 height无效  -->
            <u-image
              :mode="index2 == 0 ? 'widthFix' : 'scaleToFill'"
              :src="item2.image_src"
              height="100%"
            ></u-image>
          </navigator>
        </view>
      </view>
    </view>
    <!-- 4.1 楼层 结束 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      swiperList: [], //轮播图的图片
      catitems: [], //导航
      floors: [], //楼层
    };
  },
  async onLoad() {
    // 轮播图
    const resSwiper = await this.$u.get("/home/swiperdata");
    this.swiperList = resSwiper.message;

    //导航
    const resCate = await this.$u.get("/home/catitems");
    this.catitems = resCate.message;

    //楼层数据
    const resfloor = await this.$u.get("/home/floordata");
    this.floors = resfloor.message;
  },
};
</script>

<style lang="scss">
.floor {
  .floor-group {
    .group-title {
    }
    .group-content {
      navigator {
        float: left;
        width: 33.33%;
        border-left: 5rpx solid #fff;
        border-right: 5rpx solid #fff;
      }
      navigator:nth-last-child(-n + 4) {
        //后四个
        height: 196rpx;
      }
      navigator:nth-last-child(-n + 2) {
        //后二个
        margin-top: 3px;
      }
    }
  }
}
</style>